<template>
  <div class="mike-feed-back">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <sn8-select
            :sn8.sync="dataForm.sn8"
            @change="sn8Changed"
          />
          <!--            <el-select-->
          <!--                @change="getDataList()"-->
          <!--                clearable-->
          <!--                filterable-->
          <!--                placeholder="型号SN8"-->
          <!--                v-model="dataForm.sn8"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                  :key="item.value"-->
          <!--                  :label="item.label"-->
          <!--                  :value="item.value"-->
          <!--                  v-for="item in sn8List"-->
          <!--              >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
        </el-form-item>
      </el-form>

      <div class="mike-feedback-table">
        <el-table
          :data="dataList"
          border
          style="width: 100%;"
          v-loading="dataListLoading"
        >
          <el-table-column
            :label="$t('mike.img')"
            align="center"
            header-align="center"
            prop="url"
            width="80"
          >
            <template slot-scope="scope">
              <div
                class="text-center is-align-middle is-justify-center el-row--flex"
              >
                <midea-admin-image
                  :height="60"
                  :previewable="true"
                  :url="scope.row.url"
                  :width="60"
                  v-if="scope.row.url && scope.row.url.length > 0"
                />

                <p v-if="!scope.row.url || scope.row.url.length <= 0">
                  无图片
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('news.content')"
            align="center"
            header-align="center"
            :show-overflow-tooltip="true"
            prop="feedBack"
          />

          <el-table-column
            :label="$t('user.mobile')"
            align="center"
            header-align="center"
            prop="phone"
          />
          <el-table-column
            :label="$t('mike.sn8')"
            align="center"
            header-align="center"
            prop="sn8"
          />

          <el-table-column
            :label="$t('model.createTime')"
            align="center"
            header-align="center"
            prop="createTime"
          />

          <el-table-column
            :label="$t('handle')"
            align="center"
            fixed="right"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-button
                plain
                size="small"
                type="primary"
                @click="clickOnDetail(scope.row.id)"
              >{{ $t("detail") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          @current-change="pageCurrentChangeHandle"
          @size-change="pageSizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>

    <mike-feedback-detail
      v-if="detailShown"
      ref="feedBackDetail"
    />
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import Sn8Select from '@/components/sn8.select'
import MikeFeedbackDetail from './mike.feedback.detail'
export default {
  mixins: [mixinViewModule],
  name: 'MikFeedBack',
  components: { MikeFeedbackDetail, Sn8Select },
  data () {
    return {
      detailShown: false,
      requesting: false,
      activatedIsNeed: true,
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/feedback/get/all',
        // getDataListIsPage: true
        deleteURL: '/midea/menu/feedback/del'
        // deleteIsBatch: true
        // exportURL: '/sys/user/export'
      },
      dataForm: {
        sn8: ''
      }
    }
  },
  methods: {
    clickOnDetail (modelId) {
      this.detailShown = true
      this.$nextTick(() => {
        this.$refs.feedBackDetail.feedbackId = modelId
        this.$refs.feedBackDetail.init()
      })
    },
    sn8Changed (sn8) {
      this.getDataList()
    }
  }
}
</script>

<style scoped lang="scss">
.mike-feed-back {
}
</style>
